<template>
  <view class="list">
    <view class="item" v-for="item in list" :key="item.id" @click="jumpTo('/pages/my/promotionPosterDetail?id='+item.id)">
      <image style="width: 100%;height: 478rpx;display: block;" :src="item.url.split(',')[0]" mode="aspectFill" />
    </view>
    <a-empty v-if="!list.length"></a-empty>
  </view>
</template>

<script>
import { getMaterialsList } from '@/api/index'

export default {
  data() {
    return {
      pageNum: 1,
      list: [],
      pages: 0,
    };
  },
  mounted() {
    this.getPage()
  },
  methods: {
    getPage() {
      uni.showLoading({ mask: true })
      getMaterialsList({pageNum: this.pageNum, pageSize: 20, deptId: uni.getStorageSync('userInfo').deptId, category: '7', status: '0'}).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 20)
      })
    },
  },
  onReachBottom() {
    if(this.pageNum < this.pages) {
      this.pageNum++
      this.getPage()
    }
  },
};
</script>

<style lang="scss" scoped>
.list {
  width: 702rpx;
  display: flex;
  gap: 14rpx;
  flex-wrap: wrap;
  margin: 0 auto;
  .item {
    width: 344rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 12rpx;
  }
}
</style>
